<template>
  <view class="edit-profile-container">
    <view class="header-section">
      <text class="page-title">编辑资料</text>
    </view>
    
    <view class="profile-form">
      <view class="avatar-section">
        <image class="user-avatar" :src="profileData.avatar || '/static/logo.png'" mode="aspectFill"></image>
        <button class="change-avatar-btn" @click="changeAvatar">更换头像</button>
      </view>
      
      <view class="form-item">
        <text class="form-label">用户名</text>
        <input 
          class="form-input" 
          v-model="profileData.username" 
          placeholder="请输入用户名" 
          disabled
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">昵称</text>
        <input 
          class="form-input" 
          v-model="profileData.nickname" 
          placeholder="请输入昵称" 
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">邮箱</text>
        <input 
          class="form-input" 
          v-model="profileData.email" 
          placeholder="请输入邮箱地址" 
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">手机号</text>
        <input 
          class="form-input" 
          v-model="profileData.phone" 
          placeholder="请输入手机号" 
        />
      </view>
      
      <view class="form-actions">
        <button class="save-button" @click="saveProfile">保存</button>
        <button class="cancel-button" @click="cancelEdit">取消</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { authApi } from '../../src/services/api'

// 个人资料数据
const profileData = ref({
  username: 'zhangsan',
  nickname: '张三',
  email: 'zhangsan@example.com',
  phone: '138****8888',
  avatar: '/static/logo.png'
})

// 页面加载时获取用户信息
onMounted(() => {
  // 从本地存储获取用户信息
  const storedUser = uni.getStorageSync('user')
  if (storedUser) {
    profileData.value = {
      ...profileData.value,
      ...storedUser
    }
  }
})

// 更换头像
const changeAvatar = () => {
  uni.showToast({
    title: '更换头像功能开发中',
    icon: 'none'
  })
}

// 保存个人资料
const saveProfile = async () => {
  try {
    // 这里应该调用保存个人资料的API
    const updateData = {
      nickname: profileData.value.nickname,
      email: profileData.value.email,
      phone: profileData.value.phone
    }
    
    // 过滤掉空值
    Object.keys(updateData).forEach(key => {
      if (!updateData[key as keyof typeof updateData]) {
        delete updateData[key as keyof typeof updateData]
      }
    })
    
    if (Object.keys(updateData).length === 0) {
      uni.showToast({
        title: '没有需要更新的信息',
        icon: 'none'
      })
      return
    }
    
    uni.showLoading({
      title: '保存中...'
    })
    
    const response: any = await authApi.updateUserInfo(updateData)
    
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
    
    // 更新本地存储的用户信息
    const storedUser = uni.getStorageSync('user')
    if (storedUser) {
      const updatedUser = {
        ...storedUser,
        ...response.data
      }
      uni.setStorageSync('user', updatedUser)
    }
    
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  } catch (error: any) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '保存失败',
      icon: 'none'
    })
  }
}

// 取消编辑
const cancelEdit = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.edit-profile-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.profile-form {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.user-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 75rpx;
  margin-bottom: 20rpx;
}

.change-avatar-btn {
  background-color: #f5f5f5;
  color: #333;
  border: none;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}

.form-item {
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: block;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  
  &:disabled {
    background-color: #f5f5f5;
  }
}

.form-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 50rpx;
}

.save-button, .cancel-button {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.save-button {
  background-color: #4B0082;
  color: #fff;
  border: none;
  
  &:active {
    opacity: 0.8;
  }
}

.cancel-button {
  background-color: #f5f5f5;
  color: #333;
  border: 2rpx solid #e5e5e5;
  
  &:active {
    background-color: #e5e5e5;
  }
}
</style>